<template>
  <el-container class="container">
    <el-header class="header">
      <span>个人名片</span>
    </el-header>
    <el-main class="main lum-scrollbar">
        <div class="card-preview-box">
            <div ref="previewTop" class="card-preview-top">
                <div class="card-header">
                    <!-- 样式一 -->
                    <div class="card-style-1" v-if="detail.cardType == 1">
                        <div class="logo" v-if="detail.logo">
                            <el-image style="height:30px" :src="detail.logo" fit="scale-down"></el-image>
                        </div>
                        <div class="user-data">
                            <div class="user-message">
                                <el-image style="width: 60px; height: 60px" :src="detail.avatar" :preview-src-list="[detail.avatar]" fit="cover">
                                    <template #error>
                                        <el-image :src="detaultAvatar" style="width:60px;height:60px" fit="cover"></el-image>
                                    </template>
                                </el-image>
                                <div class="user-info">
                                    <p class="user-name">{{ detail.name }}</p>
                                    <p class="job">{{ detail.positionName }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-code-content">
                            <h4 class="company-name">{{ detail.companyName }}</h4>
                            <div class="code-bottom" justify="space-between" align="start">
                                <div class="left-data">
                                    <el-row class="row-cell" v-if="detail.showPhone == 1">
                                        <el-icon>
                                            <ele-Phone/>
                                        </el-icon>
                                        <p class="data">{{ detail.phone }}</p>
                                    </el-row>
                                    <el-row class="row-cell" v-if="detail.companyAddress">
                                        <el-icon style="margin-top:2px">
                                            <ele-Location/>
                                        </el-icon>
                                        <p class="data">{{ detail.companyAddress }}</p>
                                    </el-row>
                                    <el-row class="row-cell" v-if="detail.showEmail == 1">
                                        <el-icon style="margin-top:1px">
                                            <ele-Message/>
                                        </el-icon>
                                        <p class="data">{{ detail.email }}</p>
                                    </el-row>
                                    <el-row class="row-cell" v-for="item in detail.customAttr" :key="item.id" align="middle">
                                        <span style="font-size:12px">{{ item.label }}:</span>
                                        <p class="data">{{ item.value }}</p>
                                    </el-row>
                                </div>
                                <el-image v-if="detail.qrCodeurl" style="width: 80px; height: 80px" :src="detail.qrCodeurl" :zoom-rate="1" :preview-src-list="[detail.qrCodeurl]" fit="contain"/>
                            </div>
                        </div>
                    </div>
                    <!-- 样式二 -->
                    <div class="card-style-2" v-else-if="detail.cardType == 2">
                        <div class="left-data">
                            <div class="logo">
                                <el-image style="height:60px;" :src="detail.logo" fit="scale-down"></el-image>
                            </div>
                            <el-image v-if="detail.qrCodeurl" style="width: 60px; height: 60px;margin-top:20px" :src="detail.qrCodeurl" :zoom-rate="1" :preview-src-list="[detail.qrCodeurl]" fit="contain"/>
                        </div>
                        <div class="right-data">
                            <div class="top-data">
                                <div class="user-left">
                                    <p class="name">{{ detail.name }} <span class="job">{{ detail.positionName }}</span></p>
                                    <el-row v-if="detail.showPhone == 1" class="phone-data">
                                        <el-icon color="var(--el-color-primary-light-7)" style="margin-right:5px">
                                            <ele-Phone/>
                                        </el-icon>
                                        <p class="data">{{ detail.phone }}</p>
                                    </el-row>
                                </div>
                                <el-image style="width: 50px; height: 50px" :src="detail.avatar" :preview-src-list="[detail.avatar]" fit="cover">
                                    <template #error>
                                        <el-image :src="detaultAvatar" style="width:50px;height:50px" fit="cover"></el-image>
                                    </template>
                                </el-image>
                            </div>
                            <div class="other-msg" :style="{marginLeft: detail.qrCodeurl ? '' : '-110px'}">
                                <el-row justify="space-between" class="company-data">
                                    <h4 class="company-name">{{ detail.companyName }}</h4>
                                </el-row>
                                <el-row class="row-cell" v-if="detail.companyAddress">
                                    <el-icon style="margin-top:2px" color="var(--el-color-primary)">
                                        <ele-Location/>
                                    </el-icon>
                                    <p class="data">{{ detail.companyAddress }}</p>
                                </el-row>
                                <el-row class="row-cell" v-if="detail.showEmail == 1">
                                    <el-icon style="margin-top:1px" color="var(--el-color-primary)">
                                        <ele-Message/>
                                    </el-icon>
                                    <p class="data">{{ detail.email }}</p>
                                </el-row>
                                <el-row class="row-cell" v-for="item in detail.customAttr" :key="item.id" align="middle">
                                    <span style="font-size:12px">{{ item.label }}:</span>
                                    <p class="data">{{ item.value }}</p>
                                </el-row>
                            </div>
                        </div>
                    </div>
                    <!-- 样式三 -->
                    <div class="card-style-3" v-else-if="detail.cardType == 3">
                        <div class="header-top">
                            <div class="user-name">
                                <el-image style="width: 40px; height: 40px;margin-right:5px" :src="detail.avatar" :preview-src-list="[detail.avatar]" fit="cover">
                                    <template #error>
                                        <el-image :src="detaultAvatar" style="width:40px;height:40px" fit="cover"></el-image>
                                    </template>
                                </el-image>
                                <div class="user-content">
                                    <p class="name">{{ detail.name }}</p>
                                    <p class="job">{{ detail.positionName }}</p>
                                </div>
                            </div>
                            <div class="logo" v-if="detail.logo">
                                <el-image style="height:30px" :src="detail.logo" fit="scale-down"></el-image>
                            </div>
                        </div>
                        <div class="bottom-msg">
                            <el-row justify="space-between" class="company-data">
                                <h4 class="company-name">{{ detail.companyName }}</h4>
                            </el-row>
                            <div class="other-msg">
                                <div class="left-msg">
                                    <el-row class="row-cell" v-if="detail.companyAddress">
                                        <el-icon style="margin-top:2px" color="var(--el-color-primary)">
                                            <ele-Location/>
                                        </el-icon>
                                        <p class="data">{{ detail.companyAddress }}</p>
                                    </el-row>
                                    <el-row class="row-cell" v-if="detail.showEmail == 1">
                                        <el-icon style="margin-top:1px" color="var(--el-color-primary)">
                                            <ele-Message/>
                                        </el-icon>
                                        <p class="data">{{ detail.email }}</p>
                                    </el-row>
                                    <el-row class="row-cell" v-for="item in detail.customAttr" :key="item.id" align="middle">
                                        <span style="font-size:12px">{{ item.label }}:</span>
                                        <p class="data">{{ item.value }}</p>
                                    </el-row>
                                </div>
                                <el-image v-if="detail.qrCodeurl" style="width: 60px; height: 60px;" :src="detail.qrCodeurl" :zoom-rate="1" :preview-src-list="[detail.qrCodeurl]" fit="contain"/>
                            </div>
                        </div>
                    </div>
                </div>
                <el-row justify="space-between" class="center-data" style="align-items:stretch;">
                    <el-col :span="20" v-if="detail.miniShop || detail.officeAccount || detail.yiqiShop || detail.website">
                        <el-row class="store-msg" v-if="detail.miniShop || detail.officeAccount">
                            <el-col :span="12" v-if="detail.miniShop">
                                <span class="align-tips">小程序商城：</span>
                                <span class="align-data">{{ detail.miniShop }}</span>
                            </el-col>
                            <el-col :span="12" v-if="detail.officeAccount">
                                <span class="align-tips">微信公众号：</span>
                                <span class="align-data">{{ detail.officeAccount }}</span>
                            </el-col>
                        </el-row>
                        <el-row class="store-msg" v-if="detail.yiqiShop || detail.website">
                            <el-col :span="12" v-if="detail.yiqiShop">
                                <span class="align-tips">17go.co店铺：</span>
                                <span class="align-data">{{ detail.yiqiShop }}</span>
                            </el-col>
                            <el-col :span="12" v-if="detail.website">
                                <span class="align-tips">官网地址：</span>
                                <el-link class="align-data" :underline="false" style="font-size:12px" target="_blank" :href="detail.website">{{ detail.website }}</el-link>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="4" class="col-cell">
                        <div>
                            <el-icon size="26px" color="var(--el-color-primary)">
                                <ele-Share/>
                            </el-icon>
                        </div>
                        <div class="col-data" v-if="detail.showWechat == 1" @click="showWechatDialog">
                            <wechat theme="outline" size="18" fill="#8b968d"/>
                            <p style="font-size:10px;color:#8b968d">加微信</p>
                        </div>
                    </el-col>
                </el-row>
                <el-tabs v-model="detail.tab" class="card-preview-tabs">
                    <el-tab-pane label="产品" name="1"></el-tab-pane>
                    <el-tab-pane label="简介" name="2"></el-tab-pane>
                    <el-tab-pane label="招聘" name="3"></el-tab-pane>
                    <el-tab-pane label="采购" name="4"></el-tab-pane>
                    <el-tab-pane label="工作圈" name="5"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="bottom-center">
                <el-scrollbar :style="{height: scrollHeight}">
                    <template v-if="detail.tab == 1">
                        <div class="product-list" v-if="detail.productList.length > 0">
                            <div class="product-cell" v-for="item in detail.productList" :key="item.id">
                                <el-image style="width: 88px; height: 88px" :src="item.thumb"></el-image>
                                <div class="product-data">
                                    <p class="product-title">VALENTINO华伦天奴【新年礼物】女士ROSSO红V标志渔夫帽 ROSSO红/米色 S</p>
                                    <div class="product-other">
                                        <p class="price"><span class="unit">￥</span>99.99</p>
                                        <el-icon color="var(--el-color-primary)" size="18px">
                                            <ele-ShoppingCart/>
                                        </el-icon>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-empty v-else :image-size="100" description="暂无产品"/>
                    </template>
                    <template v-else-if="detail.tab == 2">
                        <div v-if="detail.description" v-html="detail.description" class="description"></div>
                        <el-empty v-else :image-size="100" description="暂无简介"/>
                    </template>
                    <template v-else-if="detail.tab == 3">
                        <div class="hire-list" v-if="detail.hireList.length > 0">
                            <div class="hire-cell" v-for="item in detail.hireList" :key="item.id">
                                <div class="hire-top">
                                    <h4 class="hire-name">
                                        <el-tag
                                            size="small"
                                            v-for="staffType in dictMap['StaffType']"
                                            :type="staffType['tagClass']"
                                            :key="staffType.id"
                                            v-show="staffType.value == item.type"
                                        >{{ staffType.name }}
                                        </el-tag>
                                        {{ item.name }}
                                    </h4>
                                    <p class="salary" v-if="item.salaryInterview == '1'">面议</p>
                                    <p class="salary" v-else>
                                        {{ formatSalary(item.salaryStart) }} - {{ formatSalary(item.salaryEnd) }}
                                        <span v-for="salaryType in dictMap['SalaryTimeType']" :key="salaryType.id" v-show="salaryType.value == item.salaryTimeType">{{ salaryType.name }}</span>
                                    </p>
                                </div>
                                <p class="location">{{ item.workLocation }}</p>
                            </div>
                        </div>
                        <el-empty v-else :image-size="100" description="暂无招聘"/>
                    </template>
                    <template v-else-if="detail.tab == 4">
                        <div class="product-list" v-if="detail.procuredList.length > 0">
                            <div class="product-cell" v-for="item in detail.procuredList" :key="item.id">
                                <el-image style="width: 88px; height: 88px" :src="item.thumb"/>
                                <div class="product-data">
                                    <p class="product-title">VALENTINO华伦天奴【新年礼物】女士ROSSO红V标志渔夫帽 ROSSO红/米色 S</p>
                                </div>
                            </div>
                        </div>
                        <el-empty v-else :image-size="100" description="暂无产品"/>
                    </template>
                    <template v-else-if="detail.tab == 5">
                        <div class="timeline-list" v-if="detail.timeLine.length > 0">
                            <div class="timeline-cell" v-for="(item, index) in detail.timeLine" :key="item.id">
                                <el-avatar shape="square" :size="50" :src="item.avatar">
                                    <el-image :src="detaultAvatar" style="width:60px;height:60px" fit="cover"></el-image>
                                </el-avatar>
                                <div class="timeline-data">
                                    <p class="member-name">{{ item.memberName || '呵' }}</p>
                                    <div class="timeline-content">
                                        <p class="timeline-desc" v-if="item.content">{{ item.content }}</p>
                                        <div class="timeline-thumbs" v-if="!item.video && item.images && item.images.length > 0">
                                            <div class="timeline-thumb-cell" v-for="(url, idx) in item.images.split(',')" :key="url">
                                                <el-image :src="url" :preview-src-list="item.images.split(',')" fit="cover" :z-index="9" :initial-index="idx"/>
                                            </div>
                                        </div>
                                        <div class="video-thumbs" v-else-if="item.video" @click="changePlay($event, index)" :data-id="`video${index}`">
                                            <video :src="item.video" class="video-content" :id="`video${index}`" :data-id="`video${index}`"></video>
                                            <div class="play-icon" :style="{visibility: !item.play ? 'visible' : ''}">
                                                <i v-if="!item.play" class="fa fa-play-circle" :data-id="`video${index}`"></i>
                                                <i v-else class="fa fa-pause-circle" :data-id="`video${index}`"></i>
                                            </div>
                                        </div>
                                        <div class="other-options">
                                            <p class="time">{{ item.createTime }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-empty v-else :image-size="100" description="暂无工作圈内容"/>
                    </template>
                </el-scrollbar>
            </div>
        </div>
    </el-main>
    <WechatCard v-model:dialogVisible="dialogWechat" :params="detail"></WechatCard>
  </el-container>
</template>

<script>
import { reactive, ref, toRefs, watch, onMounted, nextTick } from 'vue'
import detaultAvatar from '/@/assets/detault-avatar.jpg'
import { Wechat } from '@icon-park/vue-next'
import { getDictByCodes } from '/@/api/sys/dict'
import { getCardDetail } from '/@/api/sys/card/index'
import { getCardWorkCirclePage } from '/@/api/sys/workCircle'
import WechatCard from '/@/views/personal/components/WechatCard.vue'

export default {
    name: 'UserPersonalCard',
    components: {
        Wechat,
        WechatCard
    },
    props: {
        userId: {
            type: [String, Number],
            default: null
        }
    },
    setup(props) {
        const { userId } = toRefs(props)
        const previewTop = ref()
        const state = reactive({
            detail: {
                cardType: 1,
				logo: '',
				avatar: '',
				tab: '1',
				productList: [],
                phone: '',
                name: '',
                positionName: '',
                showPhone: 1,
                showEmail: 1,
                showWechat: 1,
                companyAddress: '',
                companyName: '',
                email: '',
                customAttr: [],
				description: ``,
				hireList: [],
				procuredList: [],
				userId: 1,
                miniShop: '',
                officeAccount: '',
                yiqiShop: '',
                website: '',
				timeLine: []
            },
            scrollHeight: 0,
            dictMap: {},
            oldVideoId: '',
            oldVideoIndex: '',
            dialogWechat: false
        })
        const loadCardDetail = () => {
            getCardDetail({
                // cardUserId: userId.value
                cardUserId: '1567774847740080129'
            }).then(res => {
                let detail = res.data[0]
                detail.customAttr = JSON.parse(detail.customAttr)
                detail['tab'] = '1'
                detail['timeLine'] = []
                state.detail = res.data[0]
                getTimeLine()
            })
        }
        const getTimeLine = () => {
            getCardWorkCirclePage({
                current: 1,
                size: 1000,
                enterpriseId: state.detail.enterpriseId
            }).then(res => {
                state.detail.timeLine = res.data
            })
        }
        const getDicts = async () => {
            try {
                const res = await getDictByCodes(['StaffType', 'SalaryTimeType'])
                state.dictMap = res.data
            } catch (e) {
                console.log(e)
            }
        }
        // 格式化薪酬显示格式
        const formatSalary = (salary) => {
            if (salary > 10000) {
                salary = (salary / 10000) + 'w'
            } else if (salary > 1000) {
                salary = (salary / 1000) + 'k'
            }
            return salary
        }
        // 视频播放/暂停
        const changePlay = (e, index) => {
            const id = e.target.id ? e.target.id : e.target.dataset.id
            const videoDom = document.getElementById(id);
            const oldVideoId = state.oldVideoId
            const oldVideoIndex = state.oldVideoIndex
            if (oldVideoId == id) {
                if (videoDom.paused) {
                    videoDom.play();
                    state.detail.timeLine[index].play = true
                } else if (videoDom.play()) {
                    videoDom.pause();
                    state.detail.timeLine[index].play = false
                }
            } else {
                if (oldVideoId && document.getElementById(oldVideoId).play()) {
                    document.getElementById(oldVideoId).pause();
                    state.detail.timeLine[oldVideoIndex].play = false
                }
                if (videoDom.paused) {
                    videoDom.play();
                    state.detail.timeLine[index].play = true
                }
            }
            state.oldVideoId = id
            state.oldVideoIndex = index
        }
        // 展示微信添加数据
        const showWechatDialog = () => {
            state.dialogWechat = true
        }
        watch(() => userId.value,
            () => {
                loadCardDetail()
            }
        )
        onMounted(() => {
            nextTick(() => {
                state.scrollHeight = `calc(100vh - ${previewTop.value.clientHeight}px - 60px)`
            })
            getDicts()
            loadCardDetail()
        })
        return {
            ...toRefs(state),
            detaultAvatar,
            previewTop,
            formatSalary,
            changePlay,
            showWechatDialog
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    overflow: hidden;
    background: var(--next-bg-main-color);
    .header {
        height: 60px;
        line-height: 60px;
        padding: 0;
        text-align: center;
        border-bottom: 1px solid #f5eeee;
        position: relative;
        background: var(--next-color-white);
        span {
            font-size: 16px;
            font-weight: 400;
        }
    }

    .main {
        padding: 0;
        overflow: hidden;
        .card-preview-box{
            display: flex;
            flex-direction: column;
            :deep(.el-image) {
                display: block !important;
            }
            .card-header {
                background: var(--next-color-white);
            }
            .card-style-1{
                position: relative;
                .logo {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                }
                .user-data {
                    padding: 10px 10px 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    .user-message {
                        display: flex;
                        align-items: stretch;
                        flex: 1;
                        overflow: hidden;
                        .user-info {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            flex: 1;
                            overflow: hidden;
                            margin-left: 10px;
                            .user-name {
                                font-size: 16px;
                                font-weight: bold;
                                margin-top: 2px;
                            }
                            .job {
                                font-size: 12px;
                                color: var(--el-text-color-primary);
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                                max-width: 90%;
                            }
                        }
                    }
                }
                .card-code-content {
                    margin-top: 10px;
                    padding: 10px;
                    background: var(--el-color-primary-light-4);
                    background: -webkit-linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-light-2));
                    background: linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-light-2));

                    .company-name {
                        color: var(--next-color-white);
                        padding-left: 20px;
                    }

                    .code-bottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: stretch;

                        .left-data {
                            flex: 1;
                            overflow: hidden;
                            margin-right: 10px;
                            color: var(--next-color-white);

                            .row-cell {
                                margin-top: 5px;

                                .data {
                                    margin-left: 5px;
                                    flex: 1;
                                    overflow: hidden;
                                    word-break: break-all;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
            .card-style-2 {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: 10px 0 10px 10px;
                border-bottom: 1px solid var(--el-border-color);
                position: relative;
                overflow: hidden;
                &::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: -20%;
                    border-radius: 50%;
                    width: 60%;
                    height: 50%;
                    background: var(--el-color-primary-light-9);
                    transform: skewX(-55deg) skewY(18deg);
                    opacity: .5;
                }
                .left-data {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: calc(30% + 10px);
                    padding-right: 10px;
                }
                .right-data {
                    flex: 1;
                    .top-data {
                        background: var(--el-color-primary);
                        padding: 5px 5px 5px 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: stretch;
                        .user-left {
                            flex: 1;
                            overflow: hidden;
                            display: flex;
                            justify-content: flex-start;
                            flex-direction: column;
                        }
                        .name {
                            color: var(--next-color-white);
                            font-size: 18px;
                            .job {
                                font-size: 12px;
                                color: var(--el-color-primary-light-8);
                            }
                        }
                        .phone-data {
                            color: var(--next-color-white);
                            margin-top: 5px;
                            align-items: center;
                            .data {
                                font-size: 12px;
                            }
                        }
                    }
                    .other-msg {
                        margin-top: 15px;
                        .company-data {
                            padding-right: 5px;
                            align-items: flex-start;
                            .company-name {
                                flex: 1;
                                overflow: hidden;
                                word-break: break-all;
                                word-wrap: break-word;
                            }
                        }
                        .row-cell {
                            margin-top: 8px;
                            .data {
                                margin-left: 5px;
                                flex: 1;
                                overflow: hidden;
                                word-break: break-all;
                                font-size: 12px;
                                color: var(--el-text-color-regular);
                            }
                        }
                    }
                }
            }
            .card-style-3 {
                padding: 10px;
                border-bottom: 1px solid var(--el-border-color);
                .header-top {
                    display: flex;
                    justify-content: space-between;
                    .user-name {
                        flex: 1;
                        overflow: hidden;
                        display: flex;
                        .name {
                            color: var(--el-color-primary);
                            font-size: 16px;
                            font-weight: bold;
                        }
                        .job {
                            margin-top: 1px;
                            color: var(--el-color-primary);
                            font-size: 12px;
                        }
                    }
                }
                .bottom-msg {
                    padding-top: 20px;
                    .other-msg {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        margin-top: 5px;
                        .left-msg {
                            flex: 1;
                            overflow: hidden;
                            .row-cell {
                                margin-top: 8px;
                                .data {
                                    margin-left: 5px;
                                    flex: 1;
                                    overflow: hidden;
                                    word-break: break-all;
                                    font-size: 12px;
                                    color: var(--el-text-color-regular);
                                }
                            }
                        }
                    }
                }
            }
            .center-data {
                background: var(--next-color-white);
                padding: 10px 0;
                border-bottom: 1px solid var(--el-border-color);
                .col-cell {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    cursor: pointer;
                    .col-data {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .store-msg {
                    padding-left: 10px;
                    height: 50%;
                    font-size: 12px;
                    align-items: stretch;
                    .align-tips {
                        color: var(--el-text-color-regular);
                    }
                    :deep(.el-col) {
                        display: flex;
                        align-items: stretch;
                        word-break: break-all;
                        word-wrap: break-word;
                    }
                    .align-data {
                        flex: 1;
                        overflow: hidden;
                    }
                }
            }
            .card-preview-tabs {
                background: var(--next-color-white);
                display: flex;
                justify-content: center;
                position: sticky;
                top: 0;
                border-bottom: 1px solid var(--el-border-color);
                z-index: 2;
                :deep(.el-tabs__nav-wrap) {
                    &::after {
                        display: none;
                    }
                }
                :deep(.el-tabs__nav-wrap.is-scrollable){
                    padding: 0 10px;
                }
                :deep(.el-tabs__header) {
                    width: 100%;
                    padding-left: 18px;
                    margin-bottom: 0;
                }
            }
            .product-list {
                padding: 0 10px 10px;
                background: var(--next-color-white);
                .product-cell {
                    padding: 10px 0;
                    border-bottom: 1px solid var(--el-border-color);
                    display: flex;
                    align-items: stretch;
                    &:last-child {
                        border: none;
                        padding-bottom: 0;
                    }
                    :deep(.el-image) {
                        img {
                            border-radius: 8px;
                        }
                    }
                    .product-data {
                        flex: 1;
                        overflow: hidden;
                        margin-left: 10px;
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;
                        .product-title {
                            font-size: 14px;
                            color: var(--el-text-color-primary);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        .product-other {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .price {
                                font-size: 16px;
                                color: var(--el-color-error);
                                font-weight: bold;
                                .unit {
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
            .description {
                :deep(img) {
                    max-width: 100% !important;
                    display: block;
                }
            }
            .bottom-center{
                flex: 1;
                overflow: hidden;
            }
            .hire-list {
                padding: 0 10px 10px;
                background: var(--next-color-white);
                .hire-cell {
                    padding: 10px 0;
                    border-bottom: 1px solid var(--el-border-color);
                    &:last-child {
                        border: none;
                        padding-bottom: 0;
                    }
                    .hire-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: stretch;
                        color: var(--el-text-color-primary);
                        .hire-name {
                            display: flex;
                            align-items: center;
                            :deep(.el-tag) {
                                margin-right: 5px;
                            }
                        }
                        .salary {
                            font-size: 15px;
                            color: var(--el-color-primary);
                        }
                    }
                    .location {
                        padding: 10px 0;
                        font-size: 12px;
                        color: var(--el-text-color-regular);
                    }
                }
            }
            .timeline-list {
                background: var(--next-color-white);
                padding: 0 10px 50px;
                .timeline-cell {
                    padding: 10px 0;
                    border-bottom: 1px solid var(--el-border-color);
                    display: flex;
                    align-items: stretch;
                    &:last-child {
                        border: none;
                    }
                    .timeline-data {
                        flex: 1;
                        overflow: hidden;
                        margin-left: 10px;
                        .member-name {
                            color: var(--el-color-primary);
                            font-weight: bold;
                        }
                        .timeline-desc {
                            font-size: 14px;
                            color: var(--el-text-color-primary);
                            margin-bottom: 5px;
                        }
                        .timeline-thumbs {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            .timeline-thumb-cell {
                                width: 84px;
                                height: 84px;
                                margin-top: 5px;
                                margin-right: 5px;
                                :deep(.el-image) {
                                    width: 100% !important;
                                    height: 100% !important;
                                }
                                &:only-child {
                                    max-width: 100%;
                                    height: unset;
                                    width: unset;
                                    margin-bottom: 0;
                                }
                                &:nth-child(3n+1):nth-last-child(2),
                                &:nth-child(3n+2):last-child {
                                    margin-right: 5px;
                                    margin-bottom: 0;
                                }
                            }
                        }
                        .video-thumbs {
                            position: relative;
                            cursor: pointer;
                            width: 150px;
                            video {
                                object-fit: contain;
                                background: #000;
                                width: 150px;
                                height: 250px;
                                margin-top: 5px;
                            }
                            .play-icon {
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                margin: auto;
                                width: 150px;
                                height: 30px;
                                z-index: 10;
                                border-radius: 50%;
                                color: #fff;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                visibility: hidden;
                                opacity: .8;
                                i {
                                    font-size: 34px;
                                }
                            }
                            &:hover {
                                .play-icon {
                                    visibility: visible;
                                }
                            }
                        }
                        .other-options {
                            display: flex;
                            align-items: center;
                            margin-top: 5px;
                            font-size: 12px;
                            .time {
                                color: var(--el-color-info-light-3);
                            }
                            .del {
                                color: var(--el-color-primary);
                                display: flex;
                                align-items: center;
                                margin-left: 5px;
                                cursor: pointer;
                                margin-top: -1px;
                            }
                        }
                    }
                }
            }
        }
    }
}

::-webkit-scrollbar-track-piece {
  background: var(--next-color-white);
}
</style>